import React, { useEffect, useMemo } from "react";
import { connect } from "react-redux";
import action from '../store/action'
import timg from '../assets/images/timg.jpg'
import './less/HomeHead.less'
import { useNavigate } from "react-router-dom";

const HomeHead = function HomeHead(props) {
    //计算时间中的月和日
    let { today, info, queryUserInfoAsync } = props;
    let time = useMemo(() => {
        let [, month, day] = today.match(/^\d{4}(\d{2})(\d{2})$/);
        let monthArrOfChinese = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"]
        return {
            day: day,
            month: monthArrOfChinese[month - 1] + "月"
        }
    }, [today])
    let navigate = useNavigate()
    //第一次渲染完，如果info中没有信息，则派发一次，尝试获取登录者信息
    useEffect(() => {
        if(!info) {
            queryUserInfoAsync()
        }
    }, [])

    return <header className="home-head-box">
        <div className="info">
            <div className="time">
                <span>{time.day}</span>
                <span>{time.month}</span>
            </div>
            <h2 className="title">知乎日报</h2>
        </div>

        <div className="picture" onClick={() => {
            navigate('/personal')
        }}>
            <img src={info ? info.pic : timg} alt="" />
        </div>
    </header>
}

export default connect(
    state => state.base,
    action.base
)(HomeHead)